<template>
  <div class="main" v-loading="loading">
    <div class="top-area">
      <div class="left">
        <div class="flex-box">
          <div class="top-card" style="margin-right: 2%">
            <div class="title">{{userInfo.name ? userInfo.name + '，' : ''}}{{getCall()}}，开始您工作的一天吧！</div>
            <div class="btn-box">
              <div>
                <div class="top">
                  <img src="@/assets/images/home-ring.png" alt="" />
                  <div>今日计划数</div>
                </div>
                <div class="bottom">{{numInfo.dayPlanNum}}</div>
              </div>
              <div>
                <div class="top">
                  <img src="@/assets/images/home-book.png" alt="" />
                  <div>今日完成数</div>
                </div>
                <div class="bottom">{{numInfo.dayFinNum}}</div>
              </div>
              <div>
                <div class="top">
                  <img src="@/assets/images/home-file.png" alt="" />
                  <div>本月计划数</div>
                </div>
                <div class="bottom">{{numInfo.monPlanNum}}</div>
              </div>
              <div>
                <div class="top">
                  <img src="@/assets/images/home-email.png" alt="" />
                  <div>本月完成数</div>
                </div>
                <div class="bottom">{{numInfo.monFinNum}}</div>
              </div>
            </div>
          </div>
          <div class="top-card" style="padding: 0 24px;">
            <el-tabs v-model="activeName">
              <el-tab-pane label="记录" name="first">
                <div class="flex-row">
                  <div class="fast-btn" @click="toPage('plan')">
					<img class="circle" src="@/assets/images/home/icon1.png" alt="" />
                    <div class="label">作业计划</div>
                  </div>
                  <div class="fast-btn" @click="toPage('pordWork')">
					  <img class="circle" src="@/assets/images/home/icon2.png" alt="" />
                    <div class="label">普通作业</div>
                  </div>
                  <div class="fast-btn" @click="toPage('specialWork')">
                    <img class="circle" src="@/assets/images/home/icon3.png" alt="" />
                    <div class="label">特殊作业</div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="费用" name="second">
                <div class="flex-row">
                  <div class="fast-btn" @click="toPage('tugCharging')">
					<img class="circle" src="@/assets/images/home/icon4.png" alt="" />
                    <div class="label">普通作业</div>
                  </div>
                  <div class="fast-btn" @click="toPage('business-specialWork')">
					<img class="circle" src="@/assets/images/home/icon5.png" alt="" />
                    <div class="label">特殊作业</div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="flex-box" style="margin-top: 14px;">
          <div class="center-card" style="margin-right: 2%">
            <div class="label" style="font-size: 14px!important;">本年度拖轮使用情况</div>
            <pie-chart />
          </div>
          <div class="center-card">
            <div class="label" style="font-size: 14px!important;">拖轮费用情况</div>
            <line-chart />
          </div>
        </div>
        <div class="flex-box" style="margin-top: 14px;">
          <div class="bottom-card">
            <div class="label" style="font-size: 14px!important;">拖轮数据总览</div>
            <cut-line-chart></cut-line-chart>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top-card">
          <div class="top-bar">
           <div class="label " style="font-size: 14px!important;">拖轮情况</div>
            <div class="right" @click="toPage('tug')">查看全部</div>
          </div>
          <div class="tuglist" v-if="tugList.length > 0">
			  <div class="cell line" v-for="(item,index) in tugList" :key="index" :style="{background:activeTug.id == item.id ? 'rgba(235,235,235,0.5)' : 'rgba(0,0,0,0)'}" @click="tugClick(item)">
			    <div class="time">{{item.tugNo}}</div>
			    <div class="content">{{item.tugTypeName + '，' + item.portAreaName}}</div>
			    <div class="tag" :style="{background: item.staus == 0 ? '#FF852E' : item.staus == 1 ? '#2fa5ff' : '#ff2e2e'}">{{item.staus == 0 ? '适航' : item.staus == 1 ? '不适航' : '停修'}}</div>
			  </div>
		  </div>
		  <el-empty description="暂无数据" v-else />
        </div>
        <div class="bottom-card">
          <div class="top-bar">
            <div class="label " style="font-size: 14px!important;">拖轮作业情况</div>
            <div class="right" @click="toPage('plan')">查看全部</div>
          </div>
          <div class="worklist" v-if="workList.length > 0">
			  <div class="cell" v-for="(item,index) in workList" :key="index">
			    <div class="content">
			      <div class="title">{{item.workItemName}}</div>
			      <el-tag class="ml-2" :type="item.status == 0 ? 'warning' : 'success'">{{item.status == 0 ? '待审批' : '已审批'}}</el-tag>
			    </div>
			    <div class="time">提交时间：{{item.createTime.substring(0,10)}} | 提交人：{{item.updateByName}}</div>
			  </div>
		  </div>
		  <el-empty description="暂无数据" v-else />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import PieChart from './components/PieChart.vue'
import LineChart from './components/LineChart.vue'
import cutLineChart from './components/cutLineChart.vue'
import { useRouter } from 'vue-router'
import { ref,onMounted } from 'vue';

import api from '@/api/home'
import { getNowDate } from '@/utils'

const router = useRouter()
const isFirst = ref('0')
const activeName = ref('first')
const activeTug = ref({})
const loading = ref(false)

const userInfo = ref({
	name:JSON.parse(localStorage.getItem('userData')).realName
})

const toPage = (url) => {
	console.log(url);
	router.push(url)
}

const getCall = () => {
	var hour = new Date().getHours()
	if(hour < 6 || hour >= 18){
		return '晚上好'
	}else if(hour >= 6 && hour < 12){
		return '上午好'
	}else if(hour >= 12 && hour < 18){
		return '下午好'
	}
}

onMounted(()=>{
	getData()
})
const workList = ref([])
const tugList = ref([])
const numInfo = ref({})
const getData = () => {
  // getConsumeTmsMTug()
	api.getPlanNum({planDte:getNowDate('YYYY-MM-DD')}).then(res=>{
		numInfo.value = res.data
	})
	api.getTmsMTug().then(res=>{
		tugList.value = res.data
		if(res.data.length > 0){
			activeTug.value = res.data[0]
		}
	}).then(_=>{
		if(activeTug.value.id){
			api.getWorkByTmsMTug({id:activeTug.value.id}).then(res=>{
				workList.value = res.data
			})
		}
	})
}
const tugClick = (item) => {
	activeTug.value = item
	api.getWorkByTmsMTug({id:activeTug.value.id}).then(res=>{
		workList.value = res.data
	})
}
</script>

<style scoped lang="less">
.main {
  min-width: 1066px;
  padding: 4px;
  height: calc(100% - 60px);
  overflow: auto;
  .top-area {
    display: flex;

    .left {
      width: 70%;

      .flex-box {
        display: flex;
        justify-content: flex-start;
      }

      .top-card {
        width: 48%;
        height: 146px;
        border-radius: 10px;
        background-color: white;
        box-sizing: border-box;
        overflow: hidden;

        .title {
          color: #999;
          font-family: "PingFang HK";
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          margin-left: 16px;
          margin-top: 15px;
        }

        .btn-box {
			padding: 0 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 25px;
          font-size: 13px;

          .top {
            display: flex;
            align-items: center;
          }

          .bottom {
            font-size: 32px;
            font-weight: bold;
            margin-top: 7px;
			text-align: center;
          }

          img {
            height: 17px;
            width: 17px;
            margin-right: 5px
          }
        }
		.flex-row{
			display: flex;
			align-items: center;
			.fast-btn {
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  justify-content: center;
			  margin-right: 30px;
			  cursor: pointer;
			
			  .circle {
			    height: 48px;
			    width: 48px;
			    // background-color: lightgrey;
			    border-radius: 50%
			  }
			
			  .label {
			    margin-top: 5px;
			    color: #666;
			    font-family: "Alibaba PuHuiTi 3.0";
			    font-size: 14px;
			    font-style: normal;
			    font-weight: 400;
			    line-height: normal;
			  }
			}
		}
      }

      .center-card {
        width: 48%;
        height: 238px;
        border-radius: 10px;
        background-color: white;
        padding: 12px 14px;
        box-sizing: border-box;
        overflow: hidden;
        .title {
          color: #000;
          font-family: "PingFang SC";
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
        }
      }

      .bottom-card {
        width: 98%;
        height: 373px;
        border-radius: 10px;
        background-color: white;
        padding: 12px 14px;
        box-sizing: border-box;
        overflow: hidden;

        .title {
          color: #000;
          font-family: "PingFang SC";
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
        }
      }
    }

    .right {
      width: 30%;

      .top-card {
        width: 100%;
        height: 398px;
        border-radius: 10px;
        background-color: white;
        padding: 12px;
        box-sizing: border-box;

        .top-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          margin-bottom: 10px;

          .left {
            margin-left: 7px;
            color: #000;
            font-family: "PingFang SC";
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
          }

          .right {
            width: fit-content;
            color: #999;
            font-family: "Alibaba PuHuiTi 3.0";
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin-right: 4px;
            cursor: pointer;
          }
        }
		.tuglist{
			width: calc(100% - 10px);
			padding-right: 10px;
			height: calc(100% - 29.2px);
			overflow: auto;
			
			.cell {
			  height: 56px;
			  width: calc(100% - 10px);
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  padding: 0 5px;
			
			  &.line {
			    border-bottom: 1px solid #EBEBEB;
			  }
			
			  .time {
			    color: #999;
			    font-family: "Alibaba PuHuiTi 3.0";
			    font-size: 12px;
			    font-style: normal;
			    font-weight: 500;
			  }
			
			  .content {
			    width: 60%;
			    height: 20px;
			    color: #333;
			    font-family: "Alibaba PuHuiTi 3.0";
			    font-size: 14px;
			    font-style: normal;
			    font-weight: 400;
			    line-height: normal;
			    white-space: nowrap; /* 保持文本在一行 */
			    overflow: hidden; /* 隐藏超出容器的文本 */
			    text-overflow: ellipsis; /* 超出部分显示省略号 */
			  }
			
			  .tag {
			    width: 44px;
			    height: 20px;
			    font-size: 12px;
			    line-height: 20px;
			    text-align: center;
			    color: white;
			    border-radius: 4px;
			  }
			}
		}
		
		.tuglist::-webkit-scrollbar {  
			width: 7px;             /* 滚动条宽度 */  
		}  
		  
		/* 滚动条轨道 */  
		.tuglist::-webkit-scrollbar-track {  
			background: #ffffff;     /* 轨道的背景颜色 */  
			border-radius: 10px;     /* 轨道圆角 */  
		}  
		  
		/* 滚动条滑块 */  
		.tuglist::-webkit-scrollbar-thumb {  
			background: #0ecbff;        /* 滑块的颜色 */  
			border-radius: 10px;     /* 滑块圆角 */  
			border: 2px solid transparent; /* 滑块边框，设为透明会更自然地与背景融合 */  
			background-clip: content-box; /* 使边框不受圆角影响 */  
		}  
		  
		/* 滑块在悬浮（hover）状态下的样式 */  
		::-webkit-scrollbar-thumb:hover {  
			background: #0ecbff;        /* 悬浮时的颜色 */  
		}  
		  
		/* 滚动条滑块在按下（active）状态下的样式 */  
		::-webkit-scrollbar-thumb:active {  
			background: #0ecbff;        /* 按下时的颜色 */  
		}
      }

      .bottom-card {
        width: 100%;
        height: 373px;
        border-radius: 10px;
        background-color: white;
        margin-top: 14px;
        padding: 12px;
        box-sizing: border-box;

        .top-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          margin-bottom: 20px;

          .left {
            margin-left: 7px;
            color: #000;
            font-family: "PingFang SC";
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
          }

          .right {
            width: fit-content;
            color: #999;
            font-family: "Alibaba PuHuiTi 3.0";
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin-right: 4px;
            cursor: pointer;
          }
        }
		
		.worklist{
			width: calc(100% - 10px);
			padding-right: 10px;
			height: calc(100% - 29.2px);
			overflow: auto;
			.cell {
			  width: 100%;
			  height: 67px;
			  border: 1px solid #eeeeee;
			  border-radius: 10px;
			  margin-bottom: 10px;
			  padding: 12px 20px;
			  box-sizing: border-box;
			
			  .content {
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
			
			    .title {
			      color: #000;
			      font-family: "Alibaba PuHuiTi 3.0";
			      font-size: 14px;
			      font-style: normal;
			      font-weight: 400;
			      line-height: normal;
			      white-space: nowrap; /* 保持文本在一行 */
			      overflow: hidden; /* 隐藏超出容器的文本 */
			      text-overflow: ellipsis; /* 超出部分显示省略号 */
			      margin-right: 4px;
			    }
			  }
			
			  .time {
			    color: #999;
			    font-family: "Alibaba PuHuiTi 3.0";
			    font-size: 12px;
			    font-style: normal;
			    font-weight: 400;
			    line-height: normal;
			    margin-top: 5px;
			  }
			}
		}
		.worklist::-webkit-scrollbar {
			width: 7px;             /* 滚动条宽度 */  
		}  
		  
		/* 滚动条轨道 */  
		.worklist::-webkit-scrollbar-track {  
			background: #ffffff;     /* 轨道的背景颜色 */  
			border-radius: 10px;     /* 轨道圆角 */  
		}  
		  
		/* 滚动条滑块 */  
		.worklist::-webkit-scrollbar-thumb {  
			background: #0ecbff;        /* 滑块的颜色 */  
			border-radius: 10px;     /* 滑块圆角 */  
			border: 2px solid transparent; /* 滑块边框，设为透明会更自然地与背景融合 */  
			background-clip: content-box; /* 使边框不受圆角影响 */  
		}  
		  
		/* 滑块在悬浮（hover）状态下的样式 */  
		::-webkit-scrollbar-thumb:hover {  
			background: #0ecbff;        /* 悬浮时的颜色 */  
		}  
		  
		/* 滚动条滑块在按下（active）状态下的样式 */  
		::-webkit-scrollbar-thumb:active {  
			background: #0ecbff;        /* 按下时的颜色 */  
		}
      }
    }
  }

  .bottom-area {
    width: 100%;
    margin-top: 14px;
    height: 412px;
    border-radius: 10px;
    background-color: white;
    padding: 12px 14px;
    box-sizing: border-box;

    .title {
      color: #000;
      font-family: "PingFang SC";
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }

    .table {
      margin-top: 20px;
      height: 285px;
      overflow-y: scroll;
    }

    .page-bottom {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }
}
</style>